<template>
  <BasicDrawer @register="registerBaseDrawer" title="农产品生长周期" width="800" destroyOnClose>
    <BasicTable @register="registerTable" :rowSelection="rowSelection"
                >
      <template #tableTitle>
        <a-button type="primary" @click="handleSelect"> 添加</a-button>
        <a-button type="default" @click="handleAdd"> 新增</a-button>

        <a-dropdown v-if="checkedKeys.length > 0">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="batchHandleDelete">
                <Icon icon="bx:bx-unlink"></Icon>
                删除
              </a-menu-item>
            </a-menu>
          </template>
          <a-button
          >批量操作
            <Icon icon="ant-design:down-outlined"></Icon>
          </a-button>
        </a-dropdown>
      </template>
      <template #sort="{ record}">
        <div class="horizontal-layout cell-content">
          <span>{{record.position}}</span>
          <div class="vertical-buttons">
            <a-button preIcon="ant-design:up-outlined" :disabled="record.position === 1" @click="moveUp(record)">
            </a-button>
            <a-button preIcon="ant-design:down-outlined" :disabled="record.position === total" @click="moveDown(record)">
            </a-button>
          </div>
        </div>
      </template>

      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)"/>
      </template>

      <template #proportion="{text}">
        <div >
          <span>{{ text.proportion }}</span>
          <span>({{ text.proportion * 100 }}%)</span>
        </div>
      </template>
    </BasicTable>
    <!--生长周期选择弹窗-->
    <GrowthcycleSelectModal @register="registerModal" @select="selectOk"/>
    <GrowthcycleModal @register="growthcycleModal" @success="handleSuccess"></GrowthcycleModal>

  </BasicDrawer>

</template>
<script lang="ts" setup>
import {ref, watch, unref} from 'vue';
import {BasicTable, useTable, TableAction} from '/src/components/Table';
import {BasicDrawer, useDrawer, useDrawerInner} from '/src/components/Drawer';
import {useModal} from '/src/components/Modal';

//注册drawer
const [registerModal, { openModal }] = useModal();
const [growthcycleModal, { openModal:openNewModal }] = useModal();

import GrowthcycleSelectModal from './GrowthcycleSelectModal.vue';
import {list, deleteOne,batchDelete,  add,sort} from './ProductGrowthcycle.api';
import { columns, searchFormSchema } from './ProductGrowthcycle.data';
import GrowthcycleModal from "/@/views/basic-information/product/components/GrowthcycleModal.vue";
const emit = defineEmits(['register', 'hideUserList']);
const props = defineProps({
  disableUserEdit: {type: Boolean, default: false}
})

const checkedKeys = ref<Array<string | number>>([]);
const productNo = ref('');
const [registerBaseDrawer, {setDrawerProps, closeDrawer}] = useDrawerInner(async (data) => {
  console.log(data);
  productNo.value = data.no;
  setProps({searchInfo: {productNo: data.no}});
  reload();
});
const total = ref(0);

const [registerTable, {
  reload, updateTableDataRecord, setProps, getRawDataSource, getDataSource,
  getSize, getShowPagination
}] = useTable({
  title: '生长列表',
  api: list,
  size:"small",
  columns: columns,
  formConfig: {
    labelWidth: 60,
    schemas: searchFormSchema,
    baseRowStyle: {maxHeight: '20px'},
    autoSubmitOnEnter: true,
  },
  striped: true,
  useSearchForm: true,
  showTableSetting: true,
  clickToRowSelect: false,
  bordered: true,
  showIndexColumn: false,
  tableSetting: {fullScreen: true},
  canResize: false,
  rowKey: 'id',
  actionColumn: {
    title: '操作',
    width:100,
    dataIndex: 'action',
    slots: {customRender: 'action'},
    fixed: undefined,
  },
  afterFetch: (res) => {
    // 设置总数
    let rawDataSource = getRawDataSource();
    total.value = rawDataSource.total;
  },
});

/**
 * 选择列配置
 */
const rowSelection = {
  type: 'checkbox',
  columnWidth: 50,
  selectedRowKeys: checkedKeys,
  onChange: onSelectChange,
};

/**
 * 选择事件
 */
function onSelectChange(selectedRowKeys: (string | number)[], selectionRows) {
  checkedKeys.value = selectedRowKeys;
}
/**
 * 删除事件
 */
async function handleDelete(record) {
  await deleteOne({id: record.id}, reload);
}
/**
 * 批量取消关联事件
 */
async function batchHandleDelete() {
  await batchDelete({ ids: checkedKeys.value.join(',') }, reload);
}
/**
 * 成功回调
 */
function handleSuccess() {
  reload();
}
/**
 * 选择已有生长周期
 */
function handleSelect() {
  openModal(true,{ no: productNo.value });
}
/**
 * 新增生长周期
 */
function  handleAdd(){
  openNewModal(true,{
    no: productNo.value,
    isUpdate: false,
    showFooter: true,
  });
}
/**
 * 添加已有产品
 */
async function selectOk(val) {
  await add({ productNo: productNo.value, growthcycleIds: val }, reload);
}
/**
 * 操作栏
 */
function getTableAction(record) {
  return [
    {
      label: '删除',
      popConfirm: {
        title: '是否确认删除',
        confirm: handleDelete.bind(null, record),
      },
    },
  ];
}

function moveUp(record) {
  sort({id: record.id, position: record.position - 1}, reload);
}

function moveDown(record) {
  sort({id: record.id, position: record.position + 1}, reload);
}
</script>
<style>
.cell-content {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.horizontal-layout {
  display: flex;
  align-items: center;
}

.vertical-buttons {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}
</style>
